<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>博客</title>

    <!-- Bootstrap -->
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
</head>
<body>


<div th:replace="~{commons::navbar('dashboard')}"></div>
<div class="container">
    <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-lg-8 col-md-8 col-sm-10 col-xm-12">
        <h2 th:text="${article.getTitle()}" style="font-weight: bold">C++和Java都能干的事情一定要用Java，否则才用C++</h2>
        <div class="row">

            <div style="display: flex">
                <div>
                    <a th:href="@{/manage(uid=${article.getUid()})}" style="display: inline-block">
                        <img th:src="@{${avatar}}" class="img-circle" width="45" height="45" alt="">
                    </a>

                </div>
                <a th:href="@{/manage(uid=${article.getUid()})}" th:text="${article.getName()}" style="line-height: 45px;margin-left: 10px">陈大侠</a>
                <div style="margin-left: 3em;line-height: 45px;display: inline-block">
                    <a href="" type="button" style="background-color: #0084ff;color: white;"
                       class="btn btn-default btn-sm">
                        关注Ta
                    </a>
                </div>
            </div>
            <div>
                <span th:text="${article.getAgree()+' 人赞同了该文章'}" style="font-weight: lighter;font-size: 12px"></span>
            </div>
        </div>
        <div class="row" style="margin-top: 1em">
            <div id="test-editormd-view">
                <textarea style="display:none;" th:text="${article.getContent()}" name="test-editormd-markdown-doc"></textarea>
            </div>
            <span th:text="${'发布于'+#dates.format(article.getDate(),'yyyy-MM-dd HH:mm:ss')}" style="font-weight: lighter;font-size: 12px">发布于昨天 10:08</span>
            <div class="row" style="margin-top: 20px">
                <button th:onclick="'javascript:agree('+${article.getId()}+',this);'" type="button" class="btn btn-default btn-sm" style="color: #0084ff;">
                    <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span> <span
                        th:text="'赞同'+${article.getAgree()}"></span>
                </button>

                <a th:href="@{/detail#a1(id=${article.getId()})}" class="btn btn-link btn-sm" style="color: #8590a6;">
                    <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 添加评论
                </a>
                <button th:id="${'star'+article.getId()}" th:onclick="'javascript:star('+${article.getId()}+',this);'" class="btn btn-link btn-sm" style="color: #8590a6;">
                    <span th:if="${!article.isStar}" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span th:if="${!article.isStar}">收藏</span>
                    <span th:if="${article.isStar}" style="color: #0084ff"  class="glyphicon glyphicon-star" aria-hidden="true"></span> <span th:if="${article.isStar}" style="color: #0084ff">收藏</span>
                </button>

                <button th:id="${'agree'+article.getId()}" th:onclick="'javascript:agree('+${article.getId()}+',this);'" class="btn btn-link btn-sm" style="color: #8590a6;">
                    <span th:if="${!article.isAgree}" class="glyphicon glyphicon-heart" aria-hidden="true"></span> <span th:if="${!article.isAgree}">喜欢</span>
                    <span th:if="${article.isAgree}" style="color: #0084ff" class="glyphicon glyphicon-heart" aria-hidden="true"></span> <span th:if="${article.isAgree}" style="color: #0084ff">喜欢</span>
                </button>
                <span th:if="${session.get('user')!=null&&session.get('user').id==article.getUid()}" class="dropdown">
                            <button style="border: none" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <li><a th:href="@{/user/addArticle(id=${article.getId()})}">编辑</a></li>
                                <li><a id="delete" th:href="@{/user/deleteArticle2(id=${article.getId()},location='dashboard')}">删除</a></li>
                            </ul>
                        </span>
            </div>
        </div>
        <br>
        <br>

        <form th:action="@{/user/comment}" method="post">
            <input name="aid" hidden="hidden" th:value="${article.getId()}" type="text">
            <textarea name="content" class="form-control" rows="2" placeholder="请输入评论..."></textarea>
            <div class="text-right">
                <button style="margin-top: 5px;background-color: white;border: #0084ff solid 1px;color: #0084ff" type="submit" class="btn btn-default">提交</button>
            </div>
        </form>
        <br>
        <br>

        <a id="a1" href="#"></a>
        <div style="background-color: #f8f8f8;border-radius: 5px;padding: 10px 10px 10px 10px">
            <div th:each="comment:${comments}">
                <span style="font-weight: bold" th:text="${comment.getName()}"></span>
                <span th:if="${#strings.isEmpty(comment.getToname())}">评论：</span>
                <span th:if="${!#strings.isEmpty(comment.getToname())}" >
                    回复 <span style="font-weight: bold" th:text="${comment.getToname()}"></span>：
                </span>
                <span th:text="${comment.getContent()}"></span>
                <br>
                <span>
                    <span style="color: #01a0e4" class="glyphicon glyphicon-time"></span>
                    <span th:text="${#dates.format(comment.getDate(),'yyyy-MM-dd HH:mm:ss')}"></span>
                    <button th:onclick="huifu([[${'mx'+comment.getId()}]],this)" style="margin-top: 5px;color: #0084ff" class="btn btn-link">回复</button>
                    <div hidden="hidden" th:id="${'mx'+comment.getId()}">
                        <form th:action="@{/user/comment}" method="post">
                            <input name="aid" th:value="${article.getId()}" type="text" hidden>
                            <input name="toname" th:value="${comment.getName()}" type="text" hidden>
                            <textarea name="content" class="form-control" rows="2" placeholder="请输入回复..."></textarea>
                            <div class="text-right">
                                <button style="margin-top: 5px;background-color: white;border: #0084ff solid 1px;color: #0084ff" type="submit" class="btn btn-default">提交</button>
                            </div>
                        </form>
                    </div>
                </span>
                <hr>
            </div>
        </div>
        <br>
        <br>
    </div>
</div>
<br>
<br>
<footer class="text-center" style="width: 100%;
            height: 40px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(18,18,18,.1);
            color: black">
    备案/许可证编号为：鄂ICP备2020018205号 <br>
    Copyright@2020-2020MinXuDesigened by MinXu
</footer>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./js/bootstrap.js"></script>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>
<script th:inline="javascript">
    window.onload=function(){
        var bt=document.getElementById("delete");
        bt.onclick=function(){
            if(confirm("真的要删除吗?")){
                return true;
            }
            else{
                return false;
            }
        }
    }
    function star(id) {
        console.log(id);
        var user = '[[${session.user}]]';
        let str = JSON.stringify(user);
        console.log(str)
        console.log(str.length)
        console.log(str.length===6)
        if(str.length===6)
        {
            alert("请先登录");
            return;
        }
        $.ajax({
            type: "get",
            url: "/star",
            data: {aid:id},
            dataType: "json",
            success: function (res) {
                if (res) {
                    console.log("收藏成功");
                    console.log("star"+id);
                    document.getElementById("star"+id).innerHTML="<span style=\"color: #0084ff\" class=\"glyphicon glyphicon-star\" aria-hidden=\"true\"></span> <span style=\"color: #0084ff\">收藏</span>"
                } else {
                    console.log("收藏失败");
                    document.getElementById("star"+id).innerHTML="<span class=\"glyphicon glyphicon-star\" aria-hidden=\"true\"></span> <span>收藏</span>"
                }
            }
        });
    }
    function agree(id) {
        console.log(id);
        var user = '[[${session.user}]]';
        let str = JSON.stringify(user);
        if(str.length===6)
        {
            alert("请先登录");
            return;
        }
        $.ajax({
            type: "get",
            url: "/agree",
            data: {aid:id},
            dataType: "json",
            success: function (res) {
                if (res) {
                    console.log("点赞成功");
                    console.log("agree"+id);
                    document.getElementById("agree"+id).innerHTML="<span style=\"color: #0084ff\" class=\"glyphicon glyphicon-heart\" aria-hidden=\"true\"></span> <span style=\"color: #0084ff\">喜欢</span>"
                } else {
                    console.log("点赞失败");
                    document.getElementById("agree"+id).innerHTML="<span class=\"glyphicon glyphicon-heart\" aria-hidden=\"true\"></span> <span>喜欢</span>"
                }
            }
        });
    }
</script>
<script type="text/javascript">
    function huifu(str){
        var str1="#"+str;
        console.log(str1);
        //$(str1).toggle("slow");
        $(str1).slideToggle("slow");
    }
    testEditormdView2 = editormd.markdownToHTML("test-editormd-view", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
</script>
</body>
</html>